import useTranslations from "@/hooks/useTranslations";
import { useMediaQuery } from "react-responsive";
import styled from "styled-components";
import "./index.less";

const HomeContainer = styled.div`
  min-height: 360px;
`;

const TextCenter = styled.div<{ isMobile: boolean }>`
  margin: ${({ isMobile }) => (isMobile ? "50px 0 0 0" : "135px 0 0 0")};
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  .header-title {
    font-family: Montserrat;
    font-size: ${({ isMobile }) => (isMobile ? "32px" : "56px")};
    font-weight: 700;
    line-height: ${({ isMobile }) => (isMobile ? "40px" : "68px")};
    text-align: center;
  }

  .header-content {
    width: ${({ isMobile }) => (isMobile ? "90%" : "550px")};
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: Roboto;
    font-size: ${({ isMobile }) => (isMobile ? "16px" : "24px")};
    font-weight: 400;
    line-height: ${({ isMobile }) => (isMobile ? "24px" : "36px")};
    text-align: center;
    margin-top: ${({ isMobile }) => (isMobile ? "20px" : "92px")};
  }
`;

export default function HomeImg() {
  const $t = useTranslations();
  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });

  return (
    <>
      <HomeContainer className="mobile">
        <div className="combinedDiv"></div>
        <TextCenter isMobile={isMobile}>
          <div className="header-title">
            {$t("Easy Parking Endless Adventures")}
          </div>
          <div className="header-content">
            <div>{$t("Delivering Delightful Experiences for everyone,")}</div>
            <div>{$t("Your Satisfaction is our main Priority")}</div>
          </div>
        </TextCenter>
      </HomeContainer>
    </>
  );
}
